<template>
	<view class="">
		<view class="content"><!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<uv-form  labelPosition="left" :model="info" ref="uForm" labelWidth="120">
				<view style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1rpx solid #d6d7d9;padding-bottom: 20rpx;">
					<view class="">头像</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<image style="width:80rpx;height: 80rpx;border-radius: 40rpx;" :src="info.headImg" mode="" @tap="updateHeadimg()"></image>
						<uv-icon slot="right" name="arrow-right"></uv-icon>
					</view>
				</view>
				<!-- <uv-form-item label="账号" prop="info" borderBottom ref="item1">
					<input v-model="info" border="none"></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item> -->
				<uv-form-item label="昵称" prop="info.userName" borderBottom ref="item1">
					<input v-model="info.userName" border="none" placeholder="请输入"></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item label="真实姓名" prop="info.realname" borderBottom ref="item1">
					<input v-model="info.realname" border="none" placeholder="请输入"></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item>
				
				<uv-form-item label="生日" prop="info.birth" borderBottom ref="item1">
					<input v-model="info.birth" border="none" placeholder="请输入"></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item label="手机" prop="info.mobile" borderBottom ref="item1">
					<input v-model="info.mobile" border="none" placeholder="请输入"></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item label="版本号" prop="info.mobile" ref="item1">
					<input v-model="version" disabledColor="#ffffff" disabled border="none" ></input>
					<uv-icon slot="right" name="arrow-right"></uv-icon>
				</uv-form-item>
				
			</uv-form>
		</view>
		<view class="box1" style=""><view class="name" style="" @tap="update">保存信息</view></view>
		<view class="box2" style=""><view class="name" style="" @tap="layout">退出登陆</view></view>
	</view>
</template>

<script>
import { searchUserInfoById, updateUserInfo, uploadImages } from '../../utils/api.js';
export default {
	data() {
		return {
			info: {},

			rules: {
				info: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				}
			},
			radio: '',
			switchVal: false,
			version: ''
		};
	},
	onShow() {
		this.getuserInfo();
		const miniProgram = wx.getAccountInfoSync();
		this.version = miniProgram.miniProgram.version;
	},
	methods: {
		getuserInfo() {
			let self = this;
			let data = {
				userId: uni.getStorageSync('userInfo').id
			};
			searchUserInfoById(data).then(res => {
				if (res.code == 200) {
					console.log(res.body);
					this.info = res.body;
				}
			});
		},
		updateHeadimg() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					let data = {
						file: res.tempFilePaths[0], //你要传的临时文件
						type: 1
					};
					uploadImages(data).then(ress => {
						if (ress.code == 200) {
							that.info.headImg = ress.body;
							console.log(that.info.headImg);
						}
					});
				}
			});
		},
		// 修改信息
		update() {
			updateUserInfo(this.info).then(res => {
				if (res.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '信息保存成功'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 600);
				}
			});
		},
		// 退出登陆
		layout() {
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确定要退出登陆吗?',
				success: function(res) {
					if (res.confirm) {
						uni.removeStorage({
							key: 'userInfo'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 600);
					}
				}
			});
		}
	}
	// onReady() {
	// 	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	// 	this.$refs.uForm.setRules(this.rules);
	// }
};
</script>
<style lang="scss">
page {
	padding: 20rpx;
	box-sizing: border-box;
}

.content {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
}
input {
	text-align: right !important;
}
.box1 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 100rpx;
	.name {
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #6d21db;
		color: #fff;
		opacity: 0.5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.box2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 40rpx;
	.name {
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #6d21db;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
